<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		<count ref="one" @change="handleDeal"></count>	
		<count ref="two" @change="handleDeal"></count>	
		<p>{{total}}</p>	
	</div>

	<script type="text/javascript">
		
		Vue.component('count', {
			template: '<div @click="addOne">{{number}}</div>',
			data: function () {
				return {
					number: 0
				}
			},
			methods: {
				addOne: function() {
					this.number ++
					this.$emit('change')
				}
			}
		})

		var vm = new Vue({
			el: '#app',
			data: {
				total: 0
			},
			methods: {
				handleDeal: function() {
					this.total = this.$refs.one.number + this.$refs.two.number
				}
			}
		})
	</script>
</body>
</html>